Codepen是一個(gè)非常了不起的網(wǎng)站，優(yōu)設(shè)哥在設(shè)計(jì)師網(wǎng)址導(dǎo)航上也大力推薦過，得到了很多同學(xué)的喜愛，也是全球web前端開發(fā)人員的圣地！

我搜索了一些時(shí)下最好最流行的codepen（僅限于HTML和CSS）。如果你能把它們?nèi)谌氲皆O(shè)計(jì)中去，那么就會(huì)大大節(jié)省很多時(shí)間。

在下面的例子中你會(huì)看到各式各樣的片段，HTML 陳列，登錄方式，垂直菜單，甚至?xí)r下最流行的主題：扁平化設(shè)計(jì)（扁平化圖像，扁平化按鈕形狀，扁平化用戶界面要素等）。好好欣賞這些精選的代碼片段吧，如果現(xiàn)在沒時(shí)間看完所有的代碼例子，那就保存下來以備不時(shí)之需吧。

更多關(guān)于前端開發(fā)的優(yōu)秀文章推薦：
《高流量網(wǎng)站CSS開發(fā)技術(shù)》
《用CSS Tables實(shí)現(xiàn)用戶界面開發(fā)和交互式布局》
《在線HTML5動(dòng)畫Banner生成工具》

CSS3 Working Clock

這是一個(gè)純css3時(shí)鐘。它使用css動(dòng)畫還有圖形，沒有使用任何圖片或者是js

CSS3 Pricing Table

CSS Loader

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

Twitter Button Concept

CSS3 Loading Animation

Pure CSS3 Vertical Menu with Hover Effect

CSS3 Stamp effect using radial gradients

I Love Blur

Social Navigation

Login

Calendar

Social Footer

Parallax Landscape

CSS3 Thermometer

CSS-Only Responsive Layout with Smooth Transitions

Flat CSS3 Weather Widget

Flat Responsive Sliding Boxes

Tiny CSS3 Round Breadcrumb

CSS3 Hover Effect using :after Psuedo Element

Flat UI Elements

CSS Flat Button Shapes

Email UI

Flat Icons CSS

原文地址：flashuser
譯文地址：960px

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：